/**
 * Dear programmer:
 * When I wrote this code, only god and I knew how it worked.
 * Now, only god knows it!
 *
 * @author: Pegasus  Date: 2020/07/14 Time: 10:06
 *
 * 选择员工
 */

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {
    Clipboard,
    Linking,
    Modal,
    SafeAreaView, ScrollView, Text, TextInput, TouchableOpacity, View
} from 'react-native';
import {
    COLOR_GRAY_LINE,
    FONT_COLOR_SUB_TITLE,
    COLOR_GRAY_BACKGROUND,
    FONT_COLOR_TITLE, COLOR_FOCUS
} from "../../../constant/PHColors"
import {styles} from "./RetrieveWHSKAlinusersScreen.Style";
import AntDesign from "react-native-vector-icons/AntDesign";
import FontAwesome from "react-native-vector-icons/FontAwesome";
import {FetchStatus} from "../../../configuration/RequestConfiguration";
import {ReturnStatus} from "../../../configuration/ReturnStatus";
import {doDisplayWarnMessage} from "../../../component/Message/Action";
import {retrieveWHSKAlinusers} from "./Actions";
import DividingLineViewComponent from "../../../component/DividingLineViewComponent/DividingLineViewComponent";
import Entypo from "react-native-vector-icons/Entypo";

class RetrieveWHSKAlinusersScreen extends Component {

    static navigationOptions = ({navigation}) => ({
        headerTitle: `选择员工`,
        headerRight: (
            <View/>
        )
    });

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            alinusers:[],
            multi:this.props.navigation.getParam("multi")?this.props.navigation.getParam("multi"):false,
            checkedUser:this.props.navigation.getParam("checkedUser")?this.props.navigation.getParam("checkedUser"):'',

        };

        this.pinin='';
    }

    componentWillReceiveProps(nextProps, nextContext): void {
        let {dispatch} = this.props;


        if (nextProps.onWHSKAlinusers !== this.props.onWHSKAlinusers && nextProps.onWHSKAlinusers.fetchStatus === FetchStatus.Success) {
            if (nextProps.onWHSKAlinusers.RETURN === ReturnStatus.Success) {
                let alinusers = nextProps.onWHSKAlinusers.alinusers
                this.setState({
                    alinusers:alinusers,
                })
            } else {
                dispatch(doDisplayWarnMessage(nextProps.onWHSKAlinusers.MSG))
            }
        }
    }

    // 组件渲染后调用
    componentDidMount() {
        let {dispatch} = this.props;

        let str = {"arg":{"utype":"房务"}}
        dispatch(retrieveWHSKAlinusers(JSON.stringify(str)))
    }

    render() {
        return (
            <SafeAreaView style={{flex: 1}}>
                <View style={[styles.body, {paddingBottom: 50}]}>
                    <ScrollView style={styles.body}>
                        {
                            this.state.alinusers.map((value,index)=>{
                                return(
                                    this.showList(value,index)
                                )

                            })
                        }

                    </ScrollView>
                </View>
                <View style={styles.bodyBottom}>
                    <TouchableOpacity activeOpacity={0.8} onPress={() => this.next_step()}>
                        <View style={styles.bodyBottomRight}>
                            <Text style={styles.cellTitleText}>
                                已选{(this.state.checkedUser==="")?'0':(this.state.checkedUser.split(',').length)}人，确认
                            </Text>
                        </View>
                    </TouchableOpacity>
                </View>
            </SafeAreaView>
        )

    }

    showList(value,index){
        let html_arr = [];

        if(value.groupby!==this.pinin){
            let html_title = (
                <View key={'title_'+index} style={[styles.itemHeader,{backgroundColor:COLOR_GRAY_BACKGROUND,height:32}]}>
                    <View style={styles.itemHeaderLeft}>
                        <Text style={styles.itemHeaderText}>
                            {value.groupby}
                        </Text>
                    </View>
                </View>
            )
            html_arr.push(html_title)
        }

        let html_user = (
            <TouchableOpacity activeOpacity={0.9} onPress={()=> {
                let checkedUser = this.state.checkedUser;
                let checkedUser_array = [];
                if(this.state.multi){
                    checkedUser_array = checkedUser.split(',');
                    if(checkedUser_array.indexOf(value.code)>=0 ){
                        checkedUser_array.splice(checkedUser_array.indexOf(value.code),1);
                        checkedUser =  checkedUser_array.join(',');
                    }else{
                        checkedUser_array.push(value.code);
                        checkedUser = checkedUser_array.join(',');
                    }
                }else{
                    checkedUser = value.code;
                }

                if(checkedUser.indexOf(',') === 0){
                    checkedUser = checkedUser.replace(',','');
                }
                
                this.setState({
                    checkedUser:checkedUser,
                })
            }}>
                <View key={'title_'+index} style={styles.itemHeader}>
                    <View style={styles.itemHeaderLeft}>
                        {
                            (this.state.checkedUser.split(',').indexOf(value.code)>=0 )
                                ?
                                (<AntDesign name={'checkcircle'} size={23} style={{color: COLOR_FOCUS, marginLeft: 10}} />)
                                :
                                (<Entypo name={'circle'} size={23} style={{color: '#b3b9ba', marginLeft: 10}} />)
                        }
                        <Text style={styles.itemHeaderText}>
                            {value.name+'-'+value.code}
                        </Text>
                    </View>
                </View>
                <DividingLineViewComponent lineHeight={1}/>
            </TouchableOpacity>
        )
        html_arr.push(html_user);

        if( (Number(index)+1) === this.state.alinusers.length){
            this.pinin = '';
        }else{
            this.pinin = value.groupby;
        }

        return html_arr
    }

    next_step=()=>{
        this.props.navigation.state.params.callBack(this.state.checkedUser);
    }

}

const props = state => {
    return {
        onWHSKAlinusers:state.onWHSKAlinusers,
    }
};

export default RetrieveWHSKAlinusersScreen = connect(props)(RetrieveWHSKAlinusersScreen);